*{
    margin:0;
    padding: 0;
    box-sizing: border-box;

}

body{
    background-color: antiquewhite;
}
.yuan{
   position: fixed;
    left:50%;
    top:50%;
    transform: translate(-50%,-50%);



}


.yuan>li{
    width: 30px;
    height: 30px;
    background-color: red;
    border-radius: 50% 50%;
    display: inline-block;
    animation-name:donghua;
    animation-duration:500ms;
    animation-timing-function:linear;
    animation-iteration-count:infinite;
    animation-direction:alternate;

}

.yuan>li:nth-child(2){
    animation-delay:200ms;
}


.yuan>li:nth-child(3){
    animation-delay:400ms;
}



@keyframes donghua{
    0%{
        transform: scale(1);
    }

    100%{
     transform: scale(0);
    }
}